<template>
    <div ref="topDiv" class="page">
        <Card dis-hover class="card">
            <Row type="flex" justify="end">
                <i-col>
                    <Button class="artical_button" @click="close">关闭</Button>
                </i-col>
            </Row>
            <Spin size="large" fix v-if="spinShow"></Spin>
            <p class="artical_title" >{{popularizationInfo.title}}</p>
            <div style="border-bottom: 2px solid #D80200; width: 60vw; height: 35px;">
                <Row type="flex" justify="center">
                    <i-col>
                        <p class="artical_info">
                            <Icon type="ios-eye-outline" style="margin-right: 5px"/>浏览次数：{{popularizationInfo.browse}}
                            <Divider type="vertical" />
                            发布时间：{{popularizationInfo.createDate}}
                            <Divider type="vertical" />
                            发布人： {{popularizationInfo.createUserId}}</p>
                    </i-col>
                </Row>
            </div>
            <Row v-if="popularizationInfo.type == 0" >
                <i-col type="flex" justify="center">
                    <viewer :images="imgs" >
                        <img
                                v-for="(src,index) in imgs"
                                :src="src"
                                :key="index"
                                class="artical_img"
                        >
                    </viewer>
                </i-col>
            </Row>
            <video v-else-if="popularizationInfo.type == 1" :src="downloadUrl" height="650" style="margin-top:20px;background-color: #000000; width: 60vw"  controls="controls"></video>
            <Row v-else-if="popularizationInfo.type == 2" style="margin-top: 20px">
                <i-col type="flex" justify="left">
                    <div v-html="popularizationInfo.content" style="width: 60vw"></div>
                </i-col>
            </Row>
        </Card>
    </div>
</template>

<script>

    import {Api} from '../../../../api/index.js'

    export default {
        name: "popularizationPlay",
        data(){
            return{
                spinShow: true,
                imgs: [],
                popularizationInfo: {},
                tableHeight: '',
                downloadUrl: '',
            }
        },
        mounted() {
            this.$http.get(Api.popularization+"/"+ this.$route.query.id).then((res) => {
                if (res.data.status == 200) {
                    this.popularizationInfo = res.data.data;
                    this.popularizationInfo.browse = isNaN(this.popularizationInfo.browse) ?  1: this.popularizationInfo.browse + 1;
                    this.popularizationInfo.createDate = this.formatDate(new Date(this.popularizationInfo.createDate), 'yyyy-MM-dd');
                    this.query();
                    this.updateBrowse();
                }
            })
        },
        methods: {
            query(){
                let id = this.popularizationInfo.popularizationId;
                let type = this.popularizationInfo.type == 0 ? 'picture': this.popularizationInfo.type == 1? 'video': 'text';
                if(type == 'picture'){
                    this.$http.get(Api.interestedPartiesUserFile + "/" + id + "/files/" + type).then((r) => {
                        if (r.data.result == "success") {
                            r.data.data.forEach(item=>{
                                this.imgs.push(item.picture);
                            })
                        }
                        this.spinShow = false;
                    }).catch(e => {
                        this.$Message.error("文件读取失败");
                        this.spinShow = false;
                    });
                }else if(type == 'video'){
                    this.$http.get(Api.interestedPartiesUserFile+"/"+id+"/files/video").then((res) => {
                        if (res.data.result == "success" && res.data.data.length > 0) {
                            this.downloadUrl = Api.downloadMongoFile + "/" + res.data.data[0].id;
                        }
                        this.spinShow = false;
                    }).catch(e => {
                        this.$Message.error("文件读取失败");
                        this.spinShow = false;
                    });
                }else{
                    this.spinShow = false;
                }
            },
            updateBrowse(){
                this.$http.put(Api.popularization, this.popularizationInfo);
            },
            close(){
                window.close();
            },
            formatDate(date, fmt) {
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
                }
                let o = {
                    'M+': date.getMonth() + 1,
                    'd+': date.getDate(),
                    'h+': date.getHours(),
                    'm+': date.getMinutes(),
                    's+': date.getSeconds()
                };
                for (let k in o) {
                    if (new RegExp(`(${k})`).test(fmt)) {
                        let str = o[k] + '';
                        fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                    }
                }
                return fmt;
            },
            padLeftZero(str) {
                return ('00' + str).substr(str.length);
            },
        }
    }
</script>

<style scoped>

    .page{
        min-width:1250px;
        overflow-y:auto;
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        height: 100vh;
        background: rgb(243, 244, 248);
        box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
    }

    .card {
        argin: 10px;
        width: 80%;
        display: flex;
        flex-direction: column;
        margin: auto auto;
        margin-top: 10px;
        display:flex;
        flex-direction:column;
        align-items:center;
        height: 98vh;
        overflow-y: auto;
    }

    .artical_title{
        margin-top:10px;
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #D80200;
        line-height: 38px;
        text-align: center;
    }

    .artical_img{
        width:500px;
        display: block;
        cursor: pointer;
        margin: auto auto;
        margin-top:20px;
    }

    .artical_info{
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #757575;
        line-height: 38px;
    }

    .artical_button{
        width: 60px;
        height: 28px;
        background: #D80200;
        border-radius: 4px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
    }
</style>
